<template>
  <div style="margin-left: 14%">
    <!-- 设备类型配置页 -->
    <el-breadcrumb separator="/">
      <!--面包屑 -->
      <el-breadcrumb-item>
        <i class="el-icon-s-home" style="margin-right: 15px; font-size: 16px"></i>设备类型配置
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <div class="info">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item class="roleInput" label="设备类型">
                    <el-input v-model.trim="formInline.EquipmentType" placeholder="请输入设备类型" size="small" clearable></el-input>
                    </el-form-item>
                    <el-form-item class="search" label="">
                    <el-button size="small" @click="search" style="float: right;" type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
                </div>
            <el-row>
            <el-button class="addBtn global_add" @click="addDalog" :disabled="btnList.add" style="float:right; margin-right: 15px;margin-bottom: 5px;" type="text">+&nbsp;新增设备类型</el-button>
            </el-row>
            <el-table stripe border :data="testGjbList.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%">
                <el-table-column align="center" prop="kind_name" label="设备类型名称">
                </el-table-column>
                <el-table-column align="center" prop="kind_en_name" label="设备类型英文名称">
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editProduct(scope.row)" class="global_add" size="small" :disabled="btnList.edit">编辑</el-button>
                        <el-button type="text" @click="deleteProduct(scope.row)" class="global_delete" style="color: red" size="small" :disabled="scope.row.kind_name==='雷电冲击耐受电压试验设备' || scope.row.kind_name==='工频耐受电压试验设备' ? true : btnList.delete">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="margin:20px 0 20px 0; float: right;" class="pagination" background :current-page.sync="currentPage" hide-on-single-page :page-size="pagesize" layout="prev, pager, next" :total="testGjbList.length"></el-pagination>
        </el-card> 
    </div>
  </div>   
</template>

<script>
import roleBtn from '../../public/means'
export default {
    data() {
        return{
        formInline:{
            EquipmentType: ''
        },
        btnList: {
            add: false,
            edit: false,
            delete: false
        },
        menu_id: 29,
        testGjbList: [],
        currentPage: 1,
        pagesize: 10,
      }
    },
    methods: {
        // 获取试验标准数据
        async getInstrumentKind() {
            const { result } = await this.$http.get('/instrument/getInstrumentKind')
            this.testGjbList = result
        },
        editProduct(row) {
            this.$router.push({path:'/AddEquipments',query:{sign: 'edit',ik_id: row.ik_id, kind_en_name: row.kind_en_name, kind_name: row.kind_name}})
        },
        async deleteProduct(row) {
            const confirm = await this.$confirm('此操作将永久删除该设备类型, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).catch(err=>err);
            if(confirm !== 'confirm'){
                return this.$message('已取消删除！')
            }
            const res = await this.$http.delete(`/instrument/delInstrumentKind?instrumentId=${row.ik_id}`).catch(err=>err)
            if(res.code !== 200) {
                return
            }
            this.$message.success(res.message)
            const index = this.testGjbList.indexOf(row) // 接口调用后手动删除数组中该元素
            this.testGjbList.splice(index,1)
        },
        addDalog() {
            this.$router.push({path:'/AddEquipments',query:{sign: 'add'}})
        },
        async search() {
            const equipmentType = this.formInline.EquipmentType
            const { result } = await this.$http.get(`/instrument/getInstrumentKind?equipmentType=${equipmentType}`)
            this.testGjbList = result
        },
        keyupSubmit(){
        document.onkeydown=e=>{
          let _key=window.event.keyCode;
          if(_key===13){
            this.search()
          }
        }
      },
    },
    async created() {
        this.keyupSubmit()
        const role_id = JSON.parse(sessionStorage.getItem('userInfo')).role_id;
        this.getInstrumentKind()
        if(role_id){
        // 获取按钮权限状态
            let arr = await roleBtn.roleBtnList(role_id, this.menu_id)
            this.btnList = arr
        }
    }
}
</script>

<style lang="scss" scoped>
@import "./EquipmentType.scss";
</style>